<template>
  <div class="container">
    <van-nav-bar fixed title="分类" />
    <van-grid :gutter="20" :column-num="2">
      <van-grid-item
        v-for="(item, index) in list"
        :key="item.id"
        :to="{ path: '/list', query: { id: item.id, index: index } }"
        icon-prefix="fa"
        :icon="item.icon.replace('fa-', '')"
        :text="item.catename"
      />
      <van-grid-item />
    </van-grid>
  </div>
</template>

<script>
import { getCateListApi } from "@/api/article";
export default {
  data() {
    return {
      list: [],
    };
  },
  created() {
    this.cateData();
  },
  methods: {
    async cateData() {
      const {
        data: { allCate },
      } = await getCateListApi();
      // console.log(allCate);
      // 追加数据
      this.list = allCate;
      // console.log(this.list)
    },
  },
};
</script>

<style scoped lang="less">
.van-grid {
  margin-top: 40px;
}
</style>